<template>
  <div>
     <slot></slot>
    <div class="" :class="{'blackscreen':showScreen}" >
    <div class="cardWrapper">
        <div class="card_title">
            <button class="card_title_close" @click="Panel_close(false)"><svg t="1673543859057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7410" width="24" height="24"><path d="M585.412525 512.594747L973.601616 124.418586c19.600808-19.600808 19.600808-51.898182 0-71.49899l-2.120404-2.120404c-19.600808-19.600808-51.898182-19.600808-71.49899 0L511.793131 439.518384 123.61697 50.799192c-19.600808-19.600808-51.898182-19.600808-71.49899 0l-2.120404 2.120404c-20.11798 19.600808-20.11798 51.898182 0 71.49899l388.189091 388.189091L49.997576 900.783838c-19.587879 19.600808-19.587879 51.898182 0 71.49899l2.120404 2.120404c19.600808 19.600808 51.898182 19.600808 71.49899 0L511.793131 586.214141l388.189091 388.176162c19.600808 19.600808 51.898182 19.600808 71.49899 0l2.120404-2.120404c19.600808-19.600808 19.600808-51.898182 0-71.49899L585.412525 512.594747z m0 0" p-id="7411"></path></svg></button>
             <h2 class="card_title_info">{{ showFs }}地址信息   </h2>
        </div>
        <div class="clearth"></div>
        <div class="cardcontainner">
          <div class="cardMain">
            <div class="siteform">
              <el-form class="el_siteform" ref="popsiteForm" :model="popsiteForm" :rules="rules"  label-width="1px">

                <el-form-item label="" prop="name">
                  <!-- class="el_col" -->
                  <el-col :span="5">
                  <el-input v-model="popsiteForm.name" placeholder="姓氏" ></el-input>
                  </el-col>
                  <el-col :span="12">
                  <el-input v-model="popsiteForm.lastname" placeholder="名字" style="margin-left:10px;"></el-input>
                   </el-col>
                </el-form-item>

                <el-form-item label="" prop="phone">
                  <el-col :span="12"  class="el_col">
                  <el-input v-model="popsiteForm.phone" placeholder="电话号码" minlength="8" maxlength="11"></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="" prop="address" class="site_cascader">
                  <el-cascader
                    size="large"
                    :options="options"
                    v-model="popsiteForm.address"
                    @change="handle_select_area"
                    placeholder="省、市、区"
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="" prop="addressDetail">
                  <el-col :span="18"  class="el_col">
                  <el-input v-model="popsiteForm.addressDetail" placeholder="详细地址"></el-input>
                  </el-col>
                </el-form-item>

                 <el-form-item label="" prop="">
                    <button  class="btn_filtercollapse"
                            type="button" @click="FcchangeCheck(listCheck.check == 0)">
                        <!-- fc_checkbox_1  { fc_checkbox_1: no_check, fc_checked: yes_checked}-->
                    <div :class="{'fc_checked': listCheck.check == 1,'fc_checkbox_1': listCheck.check == 0}">
                      <div class="icon_checked"></div>
                    </div>
                     <span class="fc_content">设为默认地址</span>
                    <!-- <span class="fc_content">{{item.ckName}}</span> -->
                    </button>
                  <!-- <el-col :span="18"  class="el_col">

                  <el-input v-model="popsiteForm.addressDetail" placeholder="详细地址"></el-input>
                  </el-col> -->
                </el-form-item>

                <div class="siteformBtn">
                  <el-button :loading=Loading class="siteformBtn_1" type="primary" @click="submitForm('popsiteForm')">立即保存</el-button>
                  <!-- <el-button el-button @click="resetForm('siteForm')"></el-button> -->
                  <span class="siteformBtn_reset" title="重置" @click="resetForm('popsiteForm')"><svg t="1673620759047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" width="16" height="16"><path d="M502.714987 58.258904l-126.531056-54.617723a52.797131 52.797131 0 0 0-41.873587 96.855428A447.865322 447.865322 0 0 0 392.02307 946.707184a61.535967 61.535967 0 0 0 13.83649 1.820591 52.797131 52.797131 0 0 0 13.65443-103.773672 342.453118 342.453118 0 0 1-31.678278-651.771485l-8.374718 19.480321a52.615072 52.615072 0 0 0 27.855039 69.182448 51.522718 51.522718 0 0 0 20.572675 4.369418A52.797131 52.797131 0 0 0 476.498481 254.882703L530.205907 127.441352a52.979191 52.979191 0 0 0-27.49092-69.182448zM962.960326 509.765407A448.775617 448.775617 0 0 0 643.992829 68.090094a52.797131 52.797131 0 1 0-30.403866 101.042786A342.635177 342.635177 0 0 1 674.578753 801.059925a52.615072 52.615072 0 0 0-92.30395-50.612422l-71.913335 117.246043a52.433013 52.433013 0 0 0 17.295612 72.82363l117.063985 72.823629a52.797131 52.797131 0 1 0 54.617722-89.755123l-16.021198-10.013249A448.593558 448.593558 0 0 0 962.960326 509.765407z" fill="#333333" p-id="2710"></path></svg></span>
                </div>
              
              </el-form>
            </div>
          </div>
        </div>
        
    </div>
  </div>
 
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  props:['data','showFs','siteUpdateForm'], //接收的参数
  name: 'popcard',
  inheritAttrs: false,
  data () {
    return {
      msg: '',
      showScreen:true,
      Loading:false,
      popsiteForm: {
         id:'',
        name: '',
        lastname:'',
        phone: '',
        address:[],
        addressInfo:'',
        addressDetail:'',
        addefault:false,
        formshow:false,
      },
      popsiteForm2:{
        id:'',
        name: '',
        lastname:'',
        phone: '',
        address:[],
        addressInfo:'',
        addressDetail:'',
        addefault:false,
        formshow:false,
      },
      options: regionData,
      selectedOptions: [],
      rules: {
        name: [
          { required: true, message: '请输入您的称谓', trigger: 'change' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入您的电话号码', trigger: 'change' },
           { min: 11, max: 11, message: '长度在 1 到 15 个字符', trigger: 'change' }
        ],
        address: [
            { type: 'array', required: true, message: '请选择地址', trigger: 'change' }
        ],
        addressDetail: [
          { required: true, message: '填写您的详细地址', trigger: 'blur' }
        ],
      }
      ,
      listCheck:{ 
        value: 0, 
        ckName: "促销代码",
        check:0
      },
          // { value: 1, ckName: "商品券" ,check:0},
      
    }
  },
  methods: {
    // 关闭面板
    Panel_close(data){
      this.$emit('closePanel', data)
    },
 
    // 选择地址
    handle_select_area(){
       var loc = "";
      for (let i = 0; i < this.popsiteForm.address.length; i++) {
        loc += CodeToText[this.popsiteForm.address[i]]; //转换中文
      }
      this.popsiteForm.addressInfo = loc;
      console.log(this.popsiteForm.addressInfo)
    },
    // 提交
    submitForm(popsiteForm) {
      // this.Loading = true;
      this.$refs[popsiteForm].validate((valid) => {
        if (valid) {
          this.Loading = true;
          // 添加数据
          setTimeout(() => {
            this.Loading = false;
    
            //简单的深拷贝
            this.popsiteForm2 = JSON.parse(JSON.stringify(this.popsiteForm))
            this.$emit('submitToParent', this.popsiteForm2)
          }, 500);
         
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(popsiteForm) {
        this.listCheck.check = 0;
        this.$refs[popsiteForm].resetFields();
    },

    //选择默认地址按钮
      FcchangeCheck(val){
        //不等于0 false 已选中
        //等于0 true 未选中
        console.log(val);
        if(val){ //=> true 
          this.listCheck.check = 1;
          this.popsiteForm.addefault = true
        }else{
           this.listCheck.check = 0;
           this.popsiteForm.addefault = false
        }
        // if (this.listCheck.check == 1) {//当前选中
        //   this.listCheck.check = 0;
        //   this.popsiteForm.default = false
        // } else if (this.listCheck.check == 0) {//未选中
        //   this.listCheck.check = 1;
        //   this.popsiteForm.default = true
        // }
    },
  },
  mounted () {
    
  }
}
</script>

<style scoped>
h1, h2, h3, h4, h5, h6,a,
div,p,fieldset,legend,span{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
.blackscreen{
    overflow: hidden;
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    transition: .8s;
    animation: blackDetails 300ms;
    animation-fill-mode: forwards;
}
@keyframes blackDetails{
  form{
      background-color: rgba(0, 0, 0,0.4);
  }
  to{
     background-color: rgba(27, 26, 26, 0.6);
  }
}

.cardWrapper{
  position: fixed;
  /* right: 30px; */
  animation: cartAnimation 300ms;
  animation-fill-mode: forwards;
  background: rgb(255,255,255);
  z-index: 11;
  width:auto;
  left: 25%;
  height: 500px;
  border-radius: 30px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  
}
@keyframes cartAnimation{
    from{
      top: -160px;
    }
    to{
     top: 80px;
    }
}

.card_title{
    padding-top: 12px;
    padding-right: 20px;
    padding-left: 10px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    /* display: inline; */
}
.card_title_info{
  color: rgb(16, 16, 16);
  font-weight: 500;
  font-size: 22px;
  margin-top: 20px;
  position: relative;
  left: 10px;
   /* display: inline; */
}
.card_title_close{
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    border: 0px;
    text-decoration: underline 1.5px rgb(17, 17, 17);
    text-underline-offset: 3px;
    float: right;
    display: inline;
    /* border-radius: 120px; */
    background:transparent;
}

.clearth{
  border-bottom: 1px solid #ddd;
}

.cardcontainner{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  height: auto;
  overflow-y: auto;
  /* overflow-y:auto; */
}
.cardMain{
  position: relative;
  width: 500px;
  /* padding: 20px; */
  /* border: 1px solid springgreen; */
  /* height: 1500px; */
  /* height: 800px; */
}
.siteform{
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  color: rgb(16, 16, 16);
}
.siteform >>> .el-input__inner:focus{
  border-color:rgb(6, 4, 4) !important;
}
.siteform >>> .el-cascader-node .in-active-path{
  color: rgb(2, 2, 2) !important;
}
.el_siteform{
  padding: 20px;
}
.el_siteform >>> .el-form-item{
  margin-bottom: 20px;
  /* display: inline; */
}
.el_siteform >>> .el-input__inner{
  border-radius: 0px;
}

.siteformBtn >>> .el-button--primary{
   outline: 0;
  border-color: transparent !important;
}

.siteformBtn_1{
  margin-top: 5px;
  position: relative;
  padding: 12px 24px;
  background: rgb(17, 17, 17);
  border-radius: 30px;
  outline: transparent solid 1.5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}
.siteformBtn_1:hover{
   background: rgb(78, 76, 76);
}
.siteformBtn_reset{
  cursor: pointer;
  margin-top: 5px;
  margin-left: 12px;
}


.btn_filtercollapse{
  margin-top: 10px;
  color: #111111;
  cursor: pointer;
  display: flex;
  overflow-wrap: break-word;
  position: relative;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  /* width: 96%; */
  font-weight: 400;
  line-height: 1.3;
  background: transparent;
  border: 0;
}
.btn_filtercollapse:hover{
color: #6c6b6b;
}
.btn_filtercollapse .fc_checkbox_1{
flex-shrink: 0;
width: 20px;
height: 20px;
vertical-align: top;
border: solid 1px #ccc;
border-radius: 4px;
margin-right: 3px;
display: inline-block;
position: relative;
/* transition: .2s; */
}
.btn_filtercollapse .fc_checkbox_1:hover{
  border: solid 1px rgb(101, 101, 101);
  transition: .2s;
}
.btn_filtercollapse .fc_checked{
flex-shrink: 0;
width: 20px;
height: 20px;
vertical-align: top;
border: solid 1px #ccc;
border-radius: 4px;
margin-right: 3px;
display: inline-block;
position: relative;
transition: .2s;
    border-color: #111111;
    background: #111111;
    /* transition: all .8s;  */
}

.fc_checked .icon_checked{
    color: #fff;
    position: absolute;
    top: 3px;
    left: 2px;
    display: inline-block;
    width: 13px;
    height: 13px;
    
}
.fc_checked .icon_checked::before{
    animation: icon_checked 300ms;
    animation-fill-mode: forwards;
    width: 8px;
    height: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 1px;
    border-top-right-radius: 4px;
   
    
    background-color: currentColor;
    display: block;
    position: absolute;
    content: '';
    transform-origin: left center;
}
@keyframes icon_checked{
    from{
        transform: rotate(-10deg);
        top: -1px;
        left: -5px;
        width: 15px;
        height: 10px;
    }
    to{
        transform: rotate(49deg);
        top: 5px;
        left: 2px;
        width: 8px;
        height: 3px;
    }
}
.fc_checked .icon_checked::after{
    animation: animation-checked 300ms;
    animation-fill-mode: forwards;
   
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
   
    /* transform: rotate(-56deg); */
    content: '';
    background-color: currentColor;
    display: block;
    position: absolute;
    transform-origin: right center;
}
@keyframes animation-checked{
    from{
        transform: rotate(-150deg);
        top:0px;
        left: -10px;
        width: 3px;
        height: 12px;
    }
    to{
        transform: rotate(-56deg);
        top:-1px;
        left: -1px;
        width: 15px;
        height:3px;
    }
}
.btn_filtercollapse .fc_content{
    display: inline-block;
    word-break: break-word;
    white-space: normal;
    margin-left: 8px;
    font-weight: 500;
    font-size: 17px;
}
</style>
